<template>
  <div
    class="group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 scroll-animate"
    :style="{ animationDelay: `${animationDelay}s` }"
  >
    <!-- 拍品图片 -->
    <div class="relative overflow-hidden aspect-[3/4]">
      <img
        :src="item.image"
        :alt="item.name"
        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
      />
      <!-- 标签 -->
      <div class="absolute top-3 left-3">
        <span class="inline-block bg-primary text-white text-xs font-bold px-2 py-1 rounded-md">
          {{ item.era }}
        </span>
      </div>
      <!-- 收藏按钮 -->
      <button
        class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-gray-600 hover:text-red-500 transition-colors"
        @click.stop="$emit('toggle-favorite')"
      >
        <i :class="item.isFavorite ? 'fa fa-heart text-red-500' : 'fa fa-heart-o'"></i>
      </button>
    </div>

    <!-- 拍品信息 -->
    <div class="p-5">
      <h3
        class="font-bold text-lg text-primary mb-2 group-hover:text-primary-dark transition-colors line-clamp-1"
      >
        {{ item.name }}
      </h3>
      <p class="text-gray-600 text-sm mb-4 line-clamp-2 h-12">
        {{ item.description }}
      </p>
      <div class="flex justify-between items-center">
        <div>
          <div class="text-xs text-gray-500 mb-1">起拍价</div>
          <div class="text-primary font-bold text-xl">
            ¥{{ item.startingPrice.toLocaleString() }}
          </div>
        </div>
        <router-link
          :to="`/item/${item.id}`"
          class="text-primary hover:text-primary-dark font-medium flex items-center gap-1 transition-colors"
        >
          <span>详情</span>
          <i class="fa fa-arrow-right text-sm"></i>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue'
import { useRouter } from 'vue-router'
import { type ProductItem as ProductItemType } from '../type'

// 定义props
const props = defineProps<{
  item: ProductItemType
  animationDelay: number
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'toggle-favorite'): void
}>()

const router = useRouter()
</script>

<style scoped>
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.text-primary {
  color: var(--primary);
}

.text-primary-dark {
  color: var(--primary-dark);
}

.bg-primary {
  background-color: var(--primary);
}
</style>
